<template>
      <div class="panel-title">
        用户列表
    </div>
    <div class="panel-body">
        <table>
            <tr>
                <td>用户编号</td>
                <td>用户名称</td>
                <td>用户密码</td>
                <td>注册时间</td>
            </tr>
            <tr v-for="item in userlist" :key="item.U_Id">
                <td> {{ item.U_Id }} </td>
                <td> {{ item.UL_Name }} </td>
                <td> {{ item.UL_PWD }} </td>
                <td> {{item.UL_DateTime }} </td>

            </tr>

            <tr>
                <td colspan="4">
                总条数：{{datasumcount}}
                当前页/总页数：{{dataindex}}/{{datasumsize}}
                <input type="button" value="首页" @click="DataPage(0)" />
                <input type="button" value="上一页" @click="DataPage(-1)" />
                <input type="button" value="下一页" @click="DataPage(1)" />
                <input type="button" value="尾页" @click="DataPage(2)" />
                </td>
            </tr>
        </table>
    </div>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import axios from 'axios'



//const getdate = getdates();

onMounted(() => {
    //loaddata();
    pagecount();
    DataPage(0);

});

//总条数
var datasumcount=ref(0);
//总页数
var datasumsize=ref(0);
//当前页
var dataindex = ref(1);
//显示数
var datasize=ref(2);
//列表
var userlist =ref([]);

//用户名
//var uname = ref("");

/*
function loaddata() {
    axios.get("https://localhost:44322/IGet")
        .then(function (res) {
            console.log(res.data);
            userlist.value = res.data;
        })
        .catch(function (err) {
            console.log(err);
        })
}
*/

//查询分页
function DataPage(o:any){
  //  alert(o)
    let pageindex= dataindex.value;
   // alert(pageindex);
    let pagesize = datasize.value;
    if(o==0){
        dataindex = ref(1);
        pageindex=1;
    }
    else if(o==-1){
        dataindex = ref(dataindex.value-1);
        pageindex=pageindex-1;
    }
    else if(o==1){
        dataindex.value = dataindex.value+1;
        pageindex = pageindex+1;
    }
    else if(o==2){
        dataindex.value = datasumsize.value;
        pageindex = datasumsize.value;
    }
   // alert(pageindex);
   // alert(pagesize);
   // alert(uname.value);

    axios.post("https://localhost:44395/PageUL?pageindex="+pageindex+"&pagesize="+pagesize)
    .then(function(res){
        console.log(res.data);
        userlist.value = res.data;
        alert(userlist.value[0].U_Id);
    })
    .catch(function(err){
        console.log(err);
    });

}
//查询总条数

function pagecount(){
    axios.post("https://localhost:44395/PageUlCount",{
        "ulname":""
    })
    .then(function(res){
        console.log(res.data);
        datasumcount.value=res.data;
        datasumsize.value = Math.ceil(datasumcount.value/datasize.value);
    })
    .catch(function(err){
        console.log(err);
    });
}

</script>